<template>
	<view class="content">
		<view class="follow-title">
			<view :class="{'chooseNav':isNav==1}" @click="chose(1)">
				未使用
			</view>
			<view :class="{'chooseNav':isNav==2}" @click="chose(2)">
				已使用
			</view>
		</view>
		<view class="couplist flexs2"  v-for="(item, index) in couponList" :key="index" :style="{backgroundImage: 'url('+ 'https://pd.pdaxiang.com/upload/static/user/card/card' + item.type +'.png)' }"  >
			<view class="left flexs" >
				<text>￥</text>
				<text>{{item.price}}</text>
			</view>
			<view class="con">
				{{item.name}}
			</view>
			<view class="l_btns">
				X {{item.num}}
			</view>
		</view>
		<view class="emptya flex-column flex-c-c" v-if="couponList == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无优惠券</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				isNav: 1,
				couponList: [],
				status:0,//0待使用1已使用2已过期
			}
		},
		onShow() {
			this.getlist()
		},
		//下拉刷新函数
		onPullDownRefresh() {
			this.page = 1;
			this.couponList = []
			this.getlist()
		},
		//触底
		onReachBottom() {
			this.page++
			this.getlist(2)
		},
		methods: {
			goexchang(){
				uni.switchTab({
					url:"/pages/index/redouble"
				})
			},
			getlist(type){
				let data = {
					page:this.page,
					status:this.status
				}
				this.$Request.get(this.$api.user.cardList,data).then(res => {
					uni.stopPullDownRefresh();
					if(type==2){
						this.couponList = this.couponList.concat(res.data.list);
						return
					}
					this.couponList = res.data.list;
				});
			},
			chose(isNav){
				this.isNav = isNav
				this.page = 1;
				this.couponList = []
				if(this.isNav==1){
					this.status = 0
				}else{
					this.status = 1
				}
				this.getlist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 99vh;
		background: #FFFFFF;
		color: #333333;
		padding-top: 10rpx;
		.couplist{
			width: 686rpx;
			height: 200rpx;
			margin: 30rpx auto 0 auto;
			background-repeat: no-repeat !important;
			background-size: 100% 100% !important;
			border-radius: 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.left{
				width: 244rpx;
				height: 152rpx;
				display: flex;
				align-items: center;
				text{
					font-size: 38rpx;
					font-family: SourceHanSansCN-Medium;
					color: #FFFFFF;
				}
				text:nth-child(2){
					font-size: 60rpx;
					font-family: Source Han Sans CN;
					font-weight: 800;
					color: #FFFFFF;
				}
			
			}
			.con{
				width: 300rpx;
				font-size: 68rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
			.l_btns{
				width: 126rpx;
				font-size: 68rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
			.chehui{
				background: #C0C0C0;
			}
		}
		.list2{
			background-size: 100% 100%;
		}
		.follow-title {
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			height: 58rpx;
			line-height: 58rpx;
			background: #FFFFFF;
			margin: 0 auto;
		
			>view {
				border: 1px solid #F8F8F8;
				background-color: #FFFFFF;
				font-size: 24rpx;
				width: 50%;
				text-align: center;
				color: #333333;
			}

			.chooseNav {
				background: #918FF4;
				color: #fff;
			}
		}

	}
</style>
